<template>
  <div>
    <table class="table" cellspacing="0" cellpadding="0">
      <thead class="thead">
        <tr class="tr">
          <td v-for="(item, index) in paramResult.title" :key="index">{{item}}</td>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr class="tr">
          <td v-for="(item, index) in paramResult.title_data" :key="index">{{item}}</td>
        </tr>
        <!-- 特殊部分 -->
        <tr class="tr" v-for="(item, index) in paramResult.crpVale" :key="index">
          <td v-if="paramResult.hole" class="hole">{{ paramResult.hole[index]}}</td>
          <td v-if="paramResult.concentration">{{ paramResult.concentration[index]}}</td>
          <td class="special-td">{{paramResult.crpVale[index]}}</td>
          <td>{{paramResult.ka[index]}}</td>
          <td>{{paramResult.kd[index]}}</td>
          <td>{{paramResult.kD[index]}}</td>
          <td>{{paramResult.RmaxRU[index]}}</td>
          <td v-if="paramResult['Chi2(RU2)']">{{ paramResult['Chi2(RU2)'][index]}}</td>
          <td v-if="paramResult.R2">{{ paramResult.R2[index]}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    paramResult: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    paramResult: {
      handler (val) {
        console.log(val)
      },
      deep: true
    }
  },
}
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  border: 2px solid #000;
  td {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
  }
  .thead {
    background-color: #eed3d2;
    font-weight: 600;
    td:nth-of-type(n+2) {
      background-color: #eed3d2;
    }
  }
  .tbody {
    td {
      border: 1px solid #c7cedf;
    }
  }
  .special-td {
    background-color: #ff8400;
    // border: 1px solid #ffffff00 !important;
  }
  .tr {
    display: flex;
    .hole {
      // border: 1px solid #ffffff00 !important;
      background-color: #cbdcf7;
    }
  }
}
</style>